<template>
	<view class="top-window">
		<view class="window-l">
			<notice-bar :text="text"></notice-bar>
		</view>
		<view class="window-r">
			<view class="item" @click="onTopMethods('traffic')">
				<image :src="isTraffic ? icon1 : icon" mode="aspectFit" class="t-img"></image>
			</view>
			<view class="item" @click="onTopMethods('satellite')">{{satellite ? '卫星' : '标准'}}</view>
			<view class="item" @click="handleMore" v-if="type == 'manyCar'">
				更多
				<view class="more" v-if="show">
					<view @click="onTopMethods('all')">全部车辆</view>
					<view @click="onTopMethods('clear')">清除全部</view>
					<view @click="onTopMethods('time')">刷新时间</view>
					<view :class="joinCluster && 'act'" @click="onTopMethods('together')">聚合开启</view>
					<view>展示更多</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noticeBar from '@/components/noticeBar/index.vue'
	export default{
		components: {
			noticeBar
		},
		props: {
			text: String,
			isTraffic: Boolean,
			satellite: Boolean,
			joinCluster: Boolean,
			type: String
		},
		data() {
			return {
				show: false,
				icon: this.$appImageUrl+"/xcx/ic_traffic_uncheck.png",
				icon1: this.$appImageUrl+"/xcx/ic_traffic_check.png"
			}
		},
		methods: {
			handleMore() {
				this.show = !this.show
			},
			onTopMethods(str, e) {
				this.$emit('onTopMethods', str)
			}
		}
	}
</script>

<style scoped>
	.top-window{
		padding: 24rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.window-l{
		width: 250rpx;
		height: 68rpx;
	}
	.window-r{
		width: 320rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 7rpx 0px rgba(160, 153, 153, 0.35);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}
	.t-img{
		width: 44rpx;
		min-width: 44rpx;
		height: 18rpx;
	}
	.item{
		flex: 1;
		height: 30rpx;
		border-right: 1px solid #E4E4E4;
		color: #333333;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.more{
		position: absolute;
		top: 60rpx;
		right: 0;
		width: 116rpx;
		padding: 0 22rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx 1px rgba(147, 145, 145, 0.39);
		border-radius: 4rpx;
		font-size: 26rpx;
	}
	.more view{
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		border-bottom: 1px solid #E3E3E3;
	}
	.act{
		color: #3791E9;
	}
</style>
